/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {Animated, Image, StyleSheet, View, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {SafeAreaView} from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/FontAwesome6';
export default function UserProfileView(props) {
  return (
    <View style={[styles.container, props.style]}>
      <Animated.View style={styles.content}>
        <SafeAreaView style={styles.insetedContent}>
          <Image
            source={{
              uri: 'https://pic-image.yesky.com/uploadImages/newPic/2023/271/56/789M5EGGWZPT.png',
            }}
            style={{width: 100, height: 100, borderRadius: 50}}
            resizeMode="center"
          />
          <View style={styles.userNickNameLine}>
            <Text style={styles.name}>申不害</Text>
            <TouchableOpacity>
              <Icon name="pen" size={12} />
            </TouchableOpacity>
          </View>
          <View style={styles.list}>
            <View style={styles.cell}>
              <Text style={styles.celltitle}>充值</Text>
              <Icon name="angle-right" />
            </View>
            <View style={styles.cell}>
              <Text style={styles.celltitle}>提现</Text>
              <Icon name="angle-right" />
            </View>
          </View>
          <TouchableOpacity style={styles.logoutButton}>
            <Text style={{color: 'white', fontWeight: 'bold'}}>退出登录</Text>
          </TouchableOpacity>
        </SafeAreaView>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(0,0,0,0.3)',
  },
  content: {
    backgroundColor: 'white',
    width: 250,
    height: '100%',
    alignItems: 'center',
  },
  insetedContent: {
    alignItems: 'center',
  },
  userNickNameLine: {
    marginTop: 8,
    flexDirection: 'row',
    alignItems: 'center',
  },
  name: {
    color: '#333333',
    fontSize: 14,
    fontWeight: 'bold',
  },
  list: {
    width: 230,
    borderWidth: 0.5,
    borderColor: '#CECECE',
    borderRadius: 4,
    marginTop: 16,
  },
  cell: {
    height: 40,
    paddingLeft: 8,
    paddingRight: 8,
    borderBottomColor: '#CECECE',
    borderBottomWidth: 0.5,
    borderColor: '#cecece',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  celltitle: {
    color: '#333333',
    fontSize: 14,
    fontWeight: '500',
  },
  logoutButton: {
    backgroundColor: 'red',
    width: 230,
    alignItems: 'center',
    height: 36,
    borderRadius: 6,
    justifyContent: 'center',
    marginTop: 20,
  },
});
